<!--
 * @Author: Zhang ShiWei
 * @Date: 2022/11/25 14:56
 * @LastEditTime: 2022/11/25 14:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FileName: tempProductLine
-->
<template>
  <div>
    <el-row style="height: 100px; padding: 20px 0px;background-color: gainsboro;">
      <el-col :span="24" class="lineImg" style="min-width: 1200px;">
        <div ref="equipment" style="width: 100%;">
          <template v-for="(itemP, key) in lineData.num">
            <div
              v-for="item in itemP"
              :key="key+item"
              :style="{left: lineData.equipmentData[key][(item-1)].postionHmi}"
              :class="getClass(key, lineData.equipmentData[key][(item-1)].IsUse)"
              class="equipment"
              @click="getData($event, key, (item - 1))"/>
          </template>
        </div>
        <div
          :style="{left: slabInfo.postionSlabHmi,width: slabInfo.slabLen, height: slabInfo.slabThk+'px'}"
          style="position: absolute; background-color: #dd5a43;top: 34px;"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "TempProductLine",
  components: {},
  data() {
    return {
      lineData: {
        len: 500,
        equipmentSelect: [],
        num: {
          FUR: 0,
          DESC: 2,
          SSP: 0,
          E: 3,
          R1: 1,
          R2: 1,
          CB: 1,
          F: 7,
          LC: 15,
          DC: 3,
          Therm: 11
        },
        equipmentData: {
          FUR: [],
          DESC: [
            {
              name: "粗除鳞",
              postion: 3.995,
              postionHmi: "2.52052%",
              IsUse: true
            },
            {
              name: "精除鳞",
              postion: 273.222,
              postionHmi: "39.8007%",
              IsUse: true
            }
          ],
          SSP: [],
          E: [
            {
              name: "立辊",
              postion: 63.915,
              postionHmi: "10.1407%",
              IsUse: true
            },
            {
              name: "立辊E2",
              postion: 153.915,
              postionHmi: "23.2708%",
              IsUse: true
            },
            {
              name: "立辊",
              postion: 279.65,
              postionHmi: "42.6143%",
              IsUse: true
            }
          ],
          R1: [
            { name: "R1", postion: 67.915, postionHmi: "10.8441%", IsUse: true }
          ],
          R2: [
            {
              name: "R2",
              postion: 157.915,
              postionHmi: "23.9742%",
              IsUse: true
            }
          ],
          CB: [
            {
              name: "热卷箱",
              postion: 251.615,
              postionHmi: "36.1665%",
              IsUse: true
            }
          ],
          F: [
            {
              name: "F1",
              postion: 282.165,
              postionHmi: "43.3177%",
              IsUse: true
            },
            {
              name: "F2",
              postion: 287.665,
              postionHmi: "44.6659%",
              IsUse: true
            },
            {
              name: "F3",
              postion: 293.165,
              postionHmi: "45.9555%",
              IsUse: true
            },
            {
              name: "F4",
              postion: 298.665,
              postionHmi: "47.3036%",
              IsUse: true
            },
            {
              name: "F5",
              postion: 304.165,
              postionHmi: "48.5932%",
              IsUse: true
            },
            {
              name: "F6",
              postion: 309.665,
              postionHmi: "49.9414%",
              IsUse: true
            },
            {
              name: "F7",
              postion: 315.165,
              postionHmi: "51.2896%",
              IsUse: true
            }
          ],
          LC: [
            {
              name: "层冷1",
              postion: 327.825,
              postionHmi: "64.5369%",
              IsUse: true
            },
            {
              name: "层冷2",
              postion: 339.985,
              postionHmi: "65.8851%",
              IsUse: true
            },
            {
              name: "层冷3",
              postion: 352.145,
              postionHmi: "67.2333%",
              IsUse: true
            },
            {
              name: "层冷4",
              postion: 364.305,
              postionHmi: "68.6401%",
              IsUse: true
            },
            {
              name: "层冷5",
              postion: 367.779,
              postionHmi: "70.0469%",
              IsUse: true
            },
            {
              name: "层冷6",
              postion: 371.253,
              postionHmi: "71.4537%",
              IsUse: true
            },
            {
              name: "层冷7",
              postion: 374.727,
              postionHmi: "72.8019%",
              IsUse: true
            },
            {
              name: "层冷8",
              postion: 378.201,
              postionHmi: "74.2087%",
              IsUse: true
            },
            {
              name: "层冷9",
              postion: 381.675,
              postionHmi: "75.5569%",
              IsUse: true
            },
            {
              name: "层冷10",
              postion: 385.149,
              postionHmi: "76.905%",
              IsUse: true
            },
            {
              name: "层冷11",
              postion: 388.623,
              postionHmi: "78.3118%",
              IsUse: true
            },
            {
              name: "层冷12",
              postion: 400.783,
              postionHmi: "79.7186%",
              IsUse: true
            },
            {
              name: "层冷13",
              postion: 412.943,
              postionHmi: "81.0668%",
              IsUse: true
            },
            {
              name: "层冷14",
              postion: 425.103,
              postionHmi: "82.4736%",
              IsUse: true
            },
            {
              name: "层冷15",
              postion: 437.263,
              postionHmi: "83.8804%",
              IsUse: true
            }
          ],
          DC: [
            {
              name: "DC1",
              postion: 455.655,
              postionHmi: "94.49%",
              IsUse: true
            },
            {
              name: "DC2",
              postion: 464.655,
              postionHmi: "96.0727%",
              IsUse: true
            },
            {
              name: "DC3",
              postion: 473.655,
              postionHmi: "97.714%",
              IsUse: true
            }
          ],
          Therm: [
            {
              name: "出炉高温计",
              postion: -20,
              postionHmi: "-0.52755%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 15.65,
              postionHmi: "4.5721%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 80.39,
              postionHmi: "13.0129%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 135.775,
              postionHmi: "21.6295%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 168.275,
              postionHmi: "24.9121%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 266.205,
              postionHmi: "38.2767%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 318.445,
              postionHmi: "52.4033%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 319.645,
              postionHmi: "53.0481%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 370.375,
              postionHmi: "70.2814%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 370.755,
              postionHmi: "71.1606%",
              IsUse: true
            },
            {
              name: "高温计",
              postion: 443.46,
              postionHmi: "89.8007%",
              IsUse: true
            }
          ]
        },
        gap: {
          FUR: 0,
          DESC: 45,
          SSP: 90,
          E: 135,
          R1: 180,
          R2: 225,
          CB: 270,
          F: 315,
          LC: 360,
          DC: 405,
          Therm: 450
        }
      },
      selectEquipment: {
        type: "R1",
        index: 0,
        data: {}
      },
      slabInfo: {
        postionSlabHmi: 0,
        postionSlabLeft: 0,
        postionSlabRight: 0,
        slabLen: 3,
        slabThk: 6,
        timeInv: null,
        equipPostion: []
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 判断设备是否使用
    getClass(key, IsUse) {
      let cla = key;
      cla += " " + key + "NoUse";
      if (IsUse) {
        cla += " " + key + "IsUse";
      }
      return cla;
    },
    getData(e, type, index) {
      this.selectEquipment.type = type;
      this.selectEquipment.index = index;
      this.selectEquipment.data = this.lineData.equipmentData[type][index];
    },
    test() {
      const data = this.lineData.equipmentData;
      let position = [];
      for (var key in data) {
        data[key].map((item, index) => {
          position.push([item.postion, item.postionHmi]);
        });
      }
      position = _.sortBy(position, function(o) {
        return o[0];
      });
      console.log(position);
      this.slabInfo.equipPostion = position;
      this.slabInfo.timeInv = setInterval(this.goTest, 1000);
      // this.goTest()
    },
    goTest() {
      if (this.slabInfo.postionSlabLeft < 500) {
        this.slabInfo.postionSlabLeft = this.slabInfo.postionSlabLeft + 5;
      }
      if (this.slabInfo.postionSlabRight < 500) {
        this.slabInfo.postionSlabRight = this.slabInfo.postionSlabRight + 6;
      }
      let slabLeftHmi = 0;
      let slabRightHmi = 0;
      const postionSlabLeft = this.slabInfo.postionSlabLeft;
      const postionSlabRight = this.slabInfo.postionSlabRight;
      let postionSlabLeftFlag = true;
      let postionSlabRightFlag = true;
      for (var index = 0; index < this.slabInfo.equipPostion.length; index++) {
        const item = this.slabInfo.equipPostion[index];
        if (index === 0) {
          if (postionSlabLeft < item[0] && postionSlabLeftFlag) {
            const hmi = Number(item[1].split("%")[0]);
            slabLeftHmi = (postionSlabLeft * hmi) / item[0];
            postionSlabLeftFlag = false;
          }
          if (postionSlabRight < item[0] && postionSlabRightFlag) {
            const hmi = Number(item[1].split("%")[0]);
            slabRightHmi = (postionSlabRight * hmi) / item[0];
            postionSlabRightFlag = false;
          }
        } else {
          const postion1 = this.slabInfo.equipPostion[index - 1][0];
          const postion2 = item[0];
          const hmi1 = Number(
            this.slabInfo.equipPostion[index - 1][1].split("%")[0]
          );
          const hmi2 = Number(item[1].split("%")[0]);
          const hmi = hmi2 - hmi1;
          const postion = postion2 - postion1;
          if (
            postionSlabLeft < postion2 &&
            postionSlabLeft >= postion1 &&
            postionSlabLeftFlag
          ) {
            slabLeftHmi = ((postionSlabLeft - postion1) * hmi) / postion + hmi1;
            postionSlabLeftFlag = false;
          }
          if (
            postionSlabRight < postion2 &&
            postionSlabRight >= postion1 &&
            postionSlabRightFlag
          ) {
            slabRightHmi =
              ((postionSlabRight - postion1) * hmi) / postion + hmi1;
            postionSlabRightFlag = false;
          }
        }
      }
      this.slabInfo.slabLen = slabRightHmi - slabLeftHmi + "%";
      this.slabInfo.postionSlabHmi = slabLeftHmi + "%";
      console.log(slabLeftHmi, slabRightHmi);
      /* if (this.slabInfo.postionSlabLeft + this.slabInfo.slabLen < 90) {
          this.slabInfo.postionSlabLeft = this.slabInfo.postionSlabLeft + 5
          this.slabInfo.slabLen = this.slabInfo.slabLen + 5
          this.slabInfo.slabThk = this.slabInfo.slabThk - 0.3
        } else {
          this.slabInfo.postionSlabLeft = this.slabInfo.postionSlabLeft + 5
          this.slabInfo.slabLen = this.slabInfo.slabLen - 5
          this.slabThk = this.slabThk
        }*/
      if (this.slabInfo.slabLen <= 0) {
        clearInterval(this.slabInfo.timeInv);
      }
    }
  }
};
</script>

<style scoped lang="scss">
</style>
